<template>
  <div class="Question" id="index">
    <Header left="arrow" title="常见问题"></Header>
    <div class="body">
      <van-form @submit="onSubmit">
        <!-- 多行输入框 -->
        <van-field
          v-model="message"
          rows="5"
          autosize
          label="我的问题"
          type="textarea"
          maxlength="100"
          placeholder="请输入留言"
          show-word-limit
        />
        <!-- 多张图片上传 -->
        <van-field name="uploader" label="请上传图片">
          <template #input>
            <van-uploader v-model="uploader" />
          </template>
        </van-field>

        <div class="button" @click="tofeedback">
          <van-button round type="primary" size="large">意见反馈</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import Vue from "vue";
import { NavBar, Icon, Cell, Button, Field, Uploader, Form } from "vant";

Vue.use(NavBar)
  .use(Icon)
  .use(Cell)
  .use(Button)
  .use(Field)
  .use(Uploader)
  .use(Form);

export default {
  components: {
    Header,
  },
  data() {
    return {
      fileList: [],
      message:'',
      uploader:[]
    };
  },
  methods: {
    tofeedback() {
      this.$router.push({ path: "/feedback" });
    },
    onSubmit(){
      console.log('提交');
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 18) {
        return value.slice(0, 18) + "...";
      }
      return value;
    },
  },
};
</script>

<style scoped>
::v-deep .van-uploader__wrapper {
  width: 90%;
  margin: 0 auto;
}
::v-deep .van-field__label{
  width: 70px;
}
::v-deep  .van-uploader__wrapper{
  width: 100%;
  margin: 0;
}
::v-deep .van-uploader__preview{
  margin: 0 5px 5px 0;
}
#app > div {
  background-color: rgba(255, 255, 255, 1);
}
#index {
  padding-top: 2.13rem;
  height: 100%;
}
.header {
  position: fixed;
  height: 2.13rem;
  line-height: 1.457rem;
  left: 0px;
  top: 0px;
  right: 0px;
}
.header_title {
  height: 2.13rem;
  line-height: 2.803rem;
}
.van-nav-bar {
  box-shadow: none;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.14901960784313725);
}
.Question >>> .van-nav-bar__title {
  font-size: 18px;
}
.left_icon {
  font-size: 25px;
}

.body {
  width: 100%;
  background-color: #ffffff;
}
.van-cell {
  padding: 18px 15px;
}
.van-cell__title {
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
}
.card_view {
  width: 100%;
  position: relative;
}
.card_view::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 15.5px;
  border-bottom: 0.5px solid #333333d8;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
/* .card_view:first-child::before{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    top: 0;
    left: 15.5px;
    z-index: 20;
    border-bottom: 0.5px solid #333333D8;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
} */
.button {
  position: fixed;
  bottom: 25px;
  right: 15px;
  left: 15px;
  z-index: 99;
}
.van-button--primary {
  background-color: #05ac6fff;
  border: 0.02667rem solid #05ac6fff;
}
.van-button {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
</style>
